<script>
    Vue.component('table-config', {
        delimiters: ['{', '}'],
        props: [
            "table",
            "model",
            "request"
        ],
        // https://stackoverflow.com/questions/7717929/how-do-i-get-pre-style-overflow-scroll-height-150px-to-display-at-parti
        template: `<div>
    <row>
        <i-col span="4">
            <i-menu :active-name="current_menu_item" @on-select="on_select">
                <menu-item name="table_param" @on-select="current_menu_item='table_param'">table param</menu-item>
                <menu-item name="tableui_config" @on-select="current_menu_item='tableui_config'">table ui config</menu-item>
                <menu-item name="model_config" @on-select="current_menu_item='model_config'">model config</menu-item>
                <menu-item name="request_config" @on-select="current_menu_item='request_config'">request config</menu-item>
            </i-menu>
        </i-col>
        <i-col span="8">
            <div v-if="current_menu_item=='table_param'">
                <h3>table parameter</h3>
                <pre>
{table_json}
                </pre>
                <h3>example backend code</h3>
                <pre>
table = functions.get_apijson_table("{table.model_name}", role="{table.role}", request_tag="{table.request_tag}", tableui_name="{table.tableui_name}")
                </pre>
                <h3>example frontend code</h3>
                <pre>
&lt;apijson-table :table=&quot;table&quot;&gt;&lt;/apijson-table&gt;
                </pre>
            </div>
            <div v-if="current_menu_item=='tableui_config'">
                <h3>settings.APIJSON_TABLE_UI.{table.tableui_name}</h3>
                <pre style="height: 25pc; overflow-y: scroll;">
{tableui_json}
            </pre>
            </div>
            <div v-if="current_menu_item=='model_config'">
                <h3>settings.APIJSON_MODELS.{table.model_name}</h3>
                <pre style="height: 25pc; overflow-y: scroll;">
{model_json}
                </pre>
            </div>
            <div v-if="current_menu_item=='request_config'">
                <h3>settings.APIJSON_REQUESTS.{table.request_tag||table.model_name}</h3>
                <pre style="height: 25pc; overflow-y: scroll;">
{request_json}
                </pre>
            </div>
        </i-col>
    </row>
</div>`,
        data: function(){
            return {
                current_menu_item: "table_param",
                table_param: {},
                tableui: {},
                tableui_json: ""
            }
        },
        computed: {
            table_json: function(){
                return JSON.stringify(this.table_param, null, 2)
            },
            model_json: function(){
                return JSON.stringify(this.model, null, 2)
            },
            request_json: function(){
                return JSON.stringify(this.request, null, 2)
            },
        },
        methods: {
            on_select: function(data){
                this.current_menu_item = data
            }
        },
        mounted: function(){
            this.table_param = JSON.parse(JSON.stringify(this.table))
            delete this.table_param.tableui
            //remove __id field, look like vuejs add this
            var tableui = JSON.parse(JSON.stringify(this.table.tableui))
            if (tableui.table_fields!=null) {
                for (let index = 0; index < tableui.table_fields.length; index++) {
                    if (tableui.table_fields[index].__id!=null)
                    delete tableui.table_fields[index].__id
                }
                this.tableui_json = JSON.stringify(tableui, null, 2)
            }
        }
    })
</script>
